<template>
	<view v-if="dataInfo">
		<view class="wrap safe-area flex column align-center" >
			<view class="wrap-store-info flex column"> 
				<view class="store-info flex align-center">
					<image class="logo" :src="$getImageURL(dataInfo.avatar)" />
					
					<view class="name f-30">{{dataInfo.shopname}}</view>
					
					<button class="share" hover-class="none">
						<image class="share" :src="$staticImagePath('article/share.png')" />
					</button>
				</view>
				
				<view class="info-list">
					<block v-for="(item, index) in infoList" :key="index">
						<view class="item flex align-center just-between">
							<view class="left f-28">{{item.title}}</view>
							
							<view class="right limit-num-line f-28">{{item.value}}</view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="wrap-list flex just-between">
				<block v-for="(item, index) in list" :key="index" >
					<view class="item flex column" v-if="item.isShow" @click="onItem(item)">
						<view class="title f-30">{{item.title}}</view>
						
						<image class="arrow" :src="$staticImagePath('store/arrow.png')" />
						
						<image class="icon" :src="$staticImagePath(item.icon)" />
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { GetShopDetail } from "@/API/store.js";
	export default {
		data() {
			return {
				dataInfo: null,
			};
		},
		computed: {
			infoList() {
				return [
					{
						title: "店铺类型",
						value: this.dataInfo === null ? "" : `${this.dataInfo.shop_type == 0 ? '本地商圈' : '电商店铺'}`
					},
					{
						title: "营业时间",
						value: this.dataInfo === null ? "" : `${this.dataInfo.start_time}~${this.dataInfo.end_time}`
					},
					{
						title: "店铺地址",
						value: this.dataInfo === null ? "" : `${this.dataInfo.address}`
					}
				]
			},
			list() {
				return [
					{
						title: "店铺主页",
						icon: "store/mainPage.png",
						url: `/pages/shop/index?id=${this.dataInfo === null ? '' : this.dataInfo.id}`,
						isShow: true,
					},
					{
						title: "店铺内部分类管理",
						icon: "store/cate_manager.png",
						url: "/pages/business/category/list",
						isShow: true,
					},
					{
						title: "品牌管理",
						icon: "store/brand_manager.png",
						url: "/pages/business/brand/list",
						isShow: true,
					},
					{
						title: "运费模版管理",
						icon: "store/fright_manager.png",
						url: "/pages/user/freight/list",
						isShow: this.dataInfo === null ? false : this.dataInfo.shop_type == 1,
					},
					{
						title: "商品管理",
						icon: "store/goods_manager.png",
						url: "/pages/mine/store/goodsManager",
						isShow: true,
					},
					{
						title: "订单管理",
						icon: "store/order_manager.png",
						url: "/pages/mine/store/orderManager",
						isShow: true,
					},
					{
						title: "拼团商品管理",
						icon: "store/group_goods.png",
						url: "/pages/mine/store/groupGoodsManager",
						isShow: false,
					},
					{
						title: "拼团订单管理",
						icon: "store/group_order.png",
						url: "/pages/mine/store/groupOrderManager",
						isShow: false,
					},
					{
						title: "群聊管理",
						icon: "store/order_manager.png",
						url: `/pages/mine/store/createChat?dataInfo=${JSON.stringify(this.dataInfo)}`,
						isShow: true,
					},
				]
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			/**
			 * 详情
			 */
			onItem(item) {
				if (item.title === "商品管理") {
					if (this.dataInfo.has_cate != 1) {
						this.$st.show("请先添加店铺内部分类", () => {
							uni.navigateTo({
								url: "/pages/business/category/list"
							})
						})
						return;
					}
					
					if (this.dataInfo.has_freight != 1 && this.dataInfo.shop_type == 1) {
						this.$st.show("请先添加运费模版", () => {
							uni.navigateTo({
								url: "/pages/user/freight/list"
							})
						})
						return;
					}
					
					if (this.dataInfo.has_brand != 1) {
						this.$st.show("请先添加品牌", () => {
							uni.navigateTo({
								url: "/pages/business/brand/list"
							})
						})
						return;
					}
				}
				
				this.$jump.to(item.url);
			},
			
			/**
			 * 网络请求
			 */
			getData() {
				GetShopDetail().then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 25rpx;
		box-sizing: border-box;
		gap: 30rpx;

		.wrap-store-info {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 16rpx;
			padding: 20rpx;
			gap: 30rpx;
			
			.store-info {
				width: 100%;
				overflow: hidden;
				gap: 20rpx;
				
				.logo {
					width: 60rpx;
					height: 60rpx;
				}
				
				.name {
					flex: 1;
					overflow: hidden;
					color: #333;
				}
				
				.share {
					width: 40rpx;
					height: 40rpx;
					padding: 0rpx !important;
					margin: 0rpx !important;
					overflow: hidden;
					background: transparent !important;
					background-color: transparent !important;
					border: none !important;
					border-radius: 0rpx !important;
				}
				button::after {
					border: none !important;
				}
			}
			.info-list {
				width: 100%;
				overflow: hidden;
				
				.item {
					width: 100%;
					overflow: hidden;
					margin-bottom: 30rpx;
					gap: 20rpx;
					
					&:last-child {
						margin-bottom: 0rpx;
					}
					
					.left {
						color: #333;
					}
					
					.right {
						--limit-num: 1;
						flex: 1;
						overflow: hidden;
						text-align: right;
						color: #999;
					}
				}
			}
		}
	
		.wrap-list {
			width: 100%;
			overflow: hidden;
			flex-wrap: wrap;
			
			.item {
				width: calc(50% - 10rpx);
				overflow: hidden;
				margin-bottom: 20rpx;
				background-color: white;
				border-radius: 16rpx;
				padding: 38rpx;
				box-sizing: border-box;
				gap: 60rpx;
				position: relative;
				z-index: 1;
				
				.title {
					font-weight: 500;
					color: #121212;
				}
				
				.arrow {
					width: 36rpx;
					height: 36rpx;
				}
				
				.icon {
					position: absolute;
					bottom: 27rpx;
					right: 24rpx;
					width: 110rpx;
					height: 90rpx;
					z-index: 2;
				}
			}
		}
	}
</style>
